<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .div2{
            width: 47rem;
            height: 63rem;
            background-color: rgb(249,249,249);
        }
        .d5{
            width: 44rem;
            height: 15rem;
            margin-top: 1rem;
            margin-left: 2rem;
            position: relative;
            background-color: white;
        }
        .d6{
            width: 2rem;
            height: 2rem;
            box-sizing: border-box;
            border: 0.1rem solid rgb(104, 103, 103);
            border-radius: 50%;
            position: absolute;
            top: 2rem;
            left: 2rem;
        }
        .d001{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            position: absolute;
            top: 0.4rem;
            left: 0.4rem;
            background-color: transparent;
        }
        .d7{
            width: 20rem;
            height: 2rem;
            font-size: 1.6rem;
            line-height: 2rem;
            position: absolute;
            top: 2rem;
            left: 5rem;
        }
        .d8{
            width: 38rem;
            height: 4rem;
            font-size: 1.4rem;
            line-height: 2rem;
            color: rgb(104, 103, 103);
            position: absolute;
            top: 5rem;
            left: 5rem;
        }
        .d002{
            width: 44rem;
            height: 0.2rem;
            background-color: rgb(249, 249, 249);
            position: absolute;
            top: 10.5rem;
            left: 0;
        }
        .d9{
            width: 5rem;
            height: 1rem;
            position: absolute;
            top: 12rem;
            right: 2rem;
        }
        .img3{
            width: 1.5rem;
            height: 1.5rem;
        }
        .d003{
            font-size: 1rem;
            color: rgb(104, 103, 103);
            position: absolute;
            right: 0;
            top: 0;
        }

        .d10{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .d004{
            width: 44rem;
            height: 5rem;
            position: absolute;
            top: 0.5rem;
            left: 2rem;
            text-align: center;
            line-height: 5rem;
            color: white;
            background-color: red;
            font-size: 2rem;
        }
        .s3{
            color: red;
        }
        .d11{
            width: 2rem;
            height: 2rem;
            box-sizing: border-box;
            border: 0.1rem solid rgb(148, 148, 148);
            border-radius: 50%;
            position: absolute;
            top: 2rem;
            left: 2rem;
        }
        .d005{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            position: absolute;
            top: 0.4rem;
            left: 0.4rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">收货地址</div>
            </div>
        </div>

        <div class="div2">
            <div class="d5">
                <div class="d6">
                    <div class="d001"></div>
                </div>
                <div class="d7">
                    <span class="s1">陶星星</span>
                    <span class="s2">159****8689</span>
                </div>
                <div class="d8">
                    <span class="s3"></span>
                    <span class="s4">北京市朝阳区霄云路26号鹏润大
                        厦B座23层2309国美在线商务有限公司</span>
                </div>
                <div class="d002"></div>
                <div class="d9">
                    <img src="img/editLogo.png" alt="" class="img3">
                    <div class="d003">编辑</div>
                </div>
            </div>

            <div class="d5">
                <div class="d11">
                    <div class="d005"></div>
                </div>
                <div class="d7">
                    <span class="s1">陶星星</span>
                    <span class="s2">159****8689</span>
                </div>
                <div class="d8">
                    <span class="s5"></span>
                    <span class="s4">北京市朝阳区霄云路26号鹏
                        润大厦B座23层2309国美在线商务有限公司</span>
                </div>
                <div class="d002"></div>
                <div class="d9">
                    <img src="img/editLogo.png" alt="" class="img3">
                    <div class="d003">编辑</div>
                </div>
            </div>

            <div class="d5">
                <div class="d11">
                    <div class="d005"></div>
                </div>
                <div class="d7">
                    <span class="s1">陶星小星星</span>
                    <span class="s2">159****8689</span>
                </div>
                <div class="d8">
                    <span class="s5"></span>
                    <span class="s4">北京市朝阳区霄云路26号鹏润大厦
                        B座23层2309国美在线商务有限公司</span>
                </div>
                <div class="d002"></div>
                <div class="d9">
                    <img src="img/editLogo.png" alt="" class="img3">
                    <div class="d003">编辑</div>
                </div>
            </div>

            <div class="d5">
                <div class="d11">
                    <div class="d005"></div>
                </div>
                <div class="d7">
                    <span class="s1">姓名</span>
                    <span class="s2">电话</span>
                </div>
                <div class="d8">
                    <span class="s5"></span>
                    <span class="s4">地址</span>
                </div>
                <div class="d002"></div>
                <div class="d9">
                    <img src="img/editLogo.png" alt="" class="img3">
                    <div class="d003">编辑</div>
                </div>
            </div>
        </div>
        
        <div class="d10">
            <div class="d004">新增地址</div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        var name;
		var phone;
		var address ;

        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".d11:eq(0)").on("click",function(){
            $(".d6").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d001").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(0)").css({
                border: "0.1rem solid red",
            })
            $(".d005:eq(0)").css({
                backgroundColor: "red",
            })
            $(".d11:eq(1)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(1)").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(2)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(2)").css({
                backgroundColor: "transparent",
            })
            $(".s5:eq(0)").html("[默认]")
            $(".s5:eq(0)").css({
                color: "red",
            })
            $(".s3").html("")
            $(".s5:eq(1)").html("")

            name = $(".s1:eq(1)").html();
            phone = $(".s2:eq(1)").html();
            address = $(".d8:eq(1)").html();
            console.log(name,phone,address)

        })

        $(".d11:eq(2)").on("click",function(){
            $(".d6").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d001").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(2)").css({
                border: "0.1rem solid red",
            })
            $(".d005:eq(2)").css({
                backgroundColor: "red",
            })
            $(".d11:eq(1)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(1)").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(0)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(0)").css({
                backgroundColor: "transparent",
            })
            $(".s5:eq(2)").html("[默认]")
            $(".s5:eq(2)").css({
                color: "red",
            })
            $(".s3").html("")
            $(".s5:eq(1)").html("")

            name = $(".s1:eq(3)").html();
            phone = $(".s2:eq(3)").html();
            address = $(".d8:eq(3)").html();
            console.log(name,phone,address)

        })

        $(".d11:eq(1)").on("click",function(){
            $(".d6").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d001").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(1)").css({
                border: "0.1rem solid red",
            })
            $(".d005:eq(1)").css({
                backgroundColor: "red",
            })
            $(".d11:eq(2)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(2)").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(0)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(0)").css({
                backgroundColor: "transparent",
            })
            $(".s5:eq(1)").html("[默认]")
            $(".s5:eq(1)").css({
                color: "red",
            })
            $(".s3").html("")
            $(".s5:eq(0)").html("")

            name = $(".s1:eq(2)").html();
            phone = $(".s2:eq(2)").html();
            address = $(".d8:eq(2)").html();
            console.log(name,phone,address)
        })

        $(".d6").on("click",function(){
            $(".d11:eq(0)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(0)").css({
                backgroundColor: "transparent",
            })
            $(".d6").css({
                border: "0.1rem solid red",
            })
            $(".d001").css({
                backgroundColor: "red",
            })
            $(".d11:eq(2)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(2)").css({
                backgroundColor: "transparent",
            })
            $(".d11:eq(1)").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005:eq(1)").css({
                backgroundColor: "transparent",
            })
            $(".s3").html("[默认]")
            $(".s3").css({
                color: "red",
            })
            $(".s5:eq(0)").html("")
            $(".s5:eq(1)").html("")

            name = $(".s1:eq(0)").html();
            phone = $(".s2:eq(0)").html();
            address = $(".d8:eq(0)").html();
            console.log(name,phone,address)

        })

        $(".d3").click(function(){
            localStorage.name = name;
			localStorage.phone = phone;
			localStorage.address = address;
			window.location.href="订单.html";
		})
       
        // $(".d5:eq(3)").css("display","none")

        $(".s1:eq(3)").html("姓名");
		$(".s2:eq(3)").html("电话");
		$(".s4:eq(3)").html("地址");

        $(".d004").click(function(){
			window.location.href = "新地址.html"
            
		})

		var t1 = localStorage.t1;
		var t2 = localStorage.t2;
		var t3 = localStorage.t3;
		var t4 = localStorage.t4;
			
		$(".s1:eq(3)").html(t1);
		$(".s2:eq(3)").html(t2);
		$(".s4:eq(3)").html(t3 + " " + t4);
		
    </script>
</body>
</html>